<template>
  <div>
    <Pagination3 :columnData="columnData"  :tableDataList="compTableData" 
    :total="total"  :pageSize="pageSize" :currentPage="currentPage" @handleChange="handleSizeCurrentPage" />
  </div>
</template>
<script>
import {students} from '@/api/api.js'
import Pagination3 from '@/components/common/Pagination3.vue'
export default{
  name:'StudentList3',
  components:{
    Pagination3
  },
  data(){
    return{
      tableData:[], // 表格全部数据，引用于mock数据
      columnData:[], // 表头数据，引用于mock数据
      tableDataList: [], // 分页后的表格数据
      total: 0, // 数据总数
      pageSize: 10, // 单页数据量
      currentPage: 1 // 当前页码
    }
  },
  created(){
     this.getStuData();
  },
  // 父组件获取表格所有的数据  pageSize currentPage 定义在父组件里在传给子组件
  // 表格所有的数据 通过computed处理 传给子组件  子组件里 只做修改分页的方法  把新的参数传给父组件  父组件获取到通过计算获取新的表格数据
  // 再传给子组件渲染
  methods: {
    // 获取表格所有的数据 和整理表头
    async getStuData(){
      const res =await students()
      if(res.data.status === 200){
        this.tableData = res.data.data
        this.total = res.data.total;
        //columnData --- [{label:'姓名',pro:'name'}] 
        var keys = Object.keys(this.tableData[0]);
        var arr = ['姓名','性别','年龄','学号','班级','状态','地址','联系方式']
        let cssArr = ['100px','60px','60px','60px','60px','80px','','120px']
        keys.shift();
          // keys = ["name", "age", "sex", "number", "class", "state", "address", "phone"]
          // [{prop:'name',label:'姓名'},{prop:'age',label:'年龄'},]
          // obj.prop = item  obj.label = arr[i]
          // 数组长度一样 可以共用 i 值
          // let resArr = [];
          // for(let i=0;i<keys.length;i++){
          //   let obj = {}
          //   obj.prop = keys[i]
          //   obj.label = arr[i]
          //   resArr.push(obj)
          // }
        for(let i =0;i<keys.length;i++){
          if(keys[i] === 'sex') keys[i] = 'sex_text'
          if(keys[i] === 'state') keys[i] = 'state_text'
        }
        // 处理表头数据
        //this.columnData= keys.map((prop,i)=>({prop,label:arr[i]  }))
        // [{prop:'name',label:'姓名',width:'60px'},{prop:'age',label:'年龄',width:'60px'},]
        const list = [ keys,arr,cssArr ]
        this.columnData = this.meraryArr(list)
        // 给 含有state属性的对象 添加一个 show-overflow-tooltip 属性
        this.columnData.forEach(item=>{
          if(item.prop === 'address'){
             item['show-overflow-tooltip'] = true;
          }
        })
        this.tableData.forEach(item=>{
           // 尽量不要修改接口返回的原数据
           item.sex === 1? item.sex_text = '男':item.sex_text = '女'
           item.state === '1'?(item.state_text='已入学') :item.state === '2' ? (item.state_text = '未入学'):(item.state_text = '休学中')
         })
       }
     },
    // 合并数组
    meraryArr(list){
      return list[0].map((prop, index) => ({
        prop,
        label: list[1][index],
        width: list[2][index]
        }))
    },
    // 最新的pageSize和currentPage复制给 原来的pageSize和currentPage  进而请求新数据
    handleSizeCurrentPage (pageSize, currentPage) {
      this.pageSize = pageSize
      this.currentPage = currentPage
    },
  },
  computed:{
      compTableData(){
         return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
       }
  }
}
</script>